<template>
<view class="">
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" out-of-bounds> 
				<image  :src="icon" @click="onClick"></image>
			</movable-view>
		</movable-area>
</view>
</template>
 
<script>
	export default {
		data() {
			return {
				icon:require("../../static/drag-icon.png")
			}
		},
		props:{
			x:{
				type:[String,Number],
				default:320
			},
			y:{
				type:[String,Number],
				default:500
			},
		},
		methods:{
			onClick(){
				wx.openCustomerServiceChat({  
					url: 'https://work.weixin.qq.com/',
				      // 这里可以传递一些参数给客服系统，比如用户的反馈信息  
				      // message: '用户反馈的内容', // 可选，用户点击按钮时自动发送给客服的消息  
				      // link: 'https://example.com', // 可选，打开客服聊天界面时，自动打开的一个网页链接  
				      success(res) {  
				        console.log('客服聊天窗口已打开', res);  
				      },  
				      fail(err) {  
				        console.error('打开客服聊天窗口失败', err);  
				      }  
				});  
			}
		}
	}
</script>
 
<style lang="scss" scoped>
.movable-area {
	position: fixed;
	pointer-events: none;
	width: 100vw;
	height: 100vh;
	z-index: 9;
	top: 0;
	left: 0;
	.movable-view {
		width: 40px;
		height: 40px;
		pointer-events: auto;
		image {
			width: 40px;
			height: 40px;
		}
	}
}
</style>